<template>
    <div id="bg-board" :style="canvasStyle" @click.natve.prevent="onClick">
        <slot/>
    </div>
</template>

<script>
  export default {
    name: "BackgroundComponent",
      props: {
          // 父组件传参统一对象
          dataJson: {
              type: Object,
              default: {}
          }
      },
      data(){
        return {
            // 暴露在外的表单属性
            interfaceAttrs: {
                bgColor: {
                    type: 'Color',
                    name: '背景色',
                    default: '#000'
                },
                width:{
                    type:'String',
                    name:'宽度',
                    default:1920
                },
                height:{
                    type:'String',
                    name:'高度',
                    default:1080
                },
                bgUrl:{
                    type:'String',
                    name:'背景图片',
                    default:'https://bootapi.jeecg.com/bigscreen/img/bg/bg6.png'
                }
            },
            // 动态的属性
            dynamicData: {},
        }
      },
      computed:{
          canvasStyle(){
              return `width:${this.dynamicData.width}px;
              height:${this.dynamicData.height}px;
              background-color:${this.dynamicData.bgColor};
              background-image:url(${this.dynamicData.bgUrl});
              `
          }
      },
      mounted() {
        this.init()
      },
      methods:{
          /**
           * 初始化
           * 1、将暴露在外的表单属性转化为组件动态属性
           * 2、将父组件的传参同步到组件中
           */
          init() {
              Object.keys(this.interfaceAttrs).forEach(item => {
                  this.$set(this.dynamicData, item, this.interfaceAttrs[item].default)
              })
              if (this.dataJson && typeof this.dataJson === 'object') {
                  this.dynamicData = {...this.dynamicData, ...this.dataJson}
              }
          },
          // 在父组件调用，用父组件传入的参数更新组件数据
          updateData(data) {
              if (data) {
                  Object.keys(data).forEach(item => {
                      if (this.interfaceAttrs[item]) {
                          // 更新组件自身数据
                          this.dynamicData[item] = data[item]
                          // 同步更新对外参数的值，避免其他组件拿到的还是旧数据
                          this.interfaceAttrs[item].default = data[item]
                      }
                  })
                  this.$forceUpdate()
              }
          },
          onClick(){
              this.$emit('clickBg')
          }
      }
  }
</script>

<style scoped lang="stylus">
#bg-board{
    position: absolute;
    top: 20px;
    left: 20px;
    transform-origin: 0 0;
    background-size 100% 100%

    &:before {
        content ''
        display block
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        z-index auto
        background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
    }
}
</style>
